<template>
	<div class="managementBox">
		<div class="leftMenuBox">
			<leftMenu></leftMenu>
		</div>
		<div class="rightContentBox">
			<section class="section">
				<transition name="fade" mode="out-in"><LayoutChild :key="menuKey"></LayoutChild></transition>
			</section>
		</div>
	</div>
</template>

<script>
	import leftMenu from './components/leftMenu.vue'
	import LayoutChild from './layout.vue'
	export default {
		components:{
			leftMenu,
			LayoutChild
		},
		data(){
			return{
				menuKey: ''
			}
		},
		computed: {
			companyId () {
				return this.$store.state.company.companyId
			}
		},
		watch:{
			companyId (newData) {
				this.menuKey = new Date().getTime() // 视图key值
				// this.$router.push(`/myteam/teaminfo/teamlist?t=${new Date().getTime()}`)
			}
		}
		
	}
</script>

<style scoped="scoped">
	.managementBox{
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	.leftMenuBox{
		width: 240px;
		padding: 20px 0;
		background: #F8F8F8;
		/* height: 100%; */
		border-right: 1px solid #DCDCDC;
		border-radius: 8px 0 0 8px;
		/* overflow: hidden; */
	}
	.rightContentBox{
		width: 960px;
		border-radius: 0 8px 8px 0;
		overflow: hidden;
	}
	/* .section{
		background: #F8F8F8;
	} */
</style>

